<template>
    <div>
        <setHeader title="新闻添加" settext="完成" @done="gotobtn()"></setHeader>
        <div class="content">
            <!-- 所属企业搜索 -->
            <div v-show="select_show">
                <el-row class="block-col-2">
                    <el-col :span="24">
                        <el-dropdown trigger="click" @command="handleCommand" :style="command_intop">
                            <span class="el-dropdown-link" style="padding-left: 0.2rem;">
                                所属企业：{{companyName}}<i class="el-icon-arrow-down el-icon--right" style="padding-right: 0.2rem;"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" style="width: 7.5rem;margin-left: -3.75 !important; left:0 !important;padding:0 !important;margin: 0 0 0 0.3rem !important;">
                                <el-dropdown-item icon="el-icon-plus" v-for="(colleague, ind) in CompanyList" :key="ind" :command="colleague" >{{colleague.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>  
            </div>
            <div class="main-news_title">
                <label for="">标题：</label>
                <textarea placeholder="请输入内容" style="-webkit-user-select:auto;" contenteditable="true" v-model="newsInserts.Title"></textarea>

            </div>
            <div class="main_news_content">
                <label for="">内容：</label>
                <textarea placeholder="请输入内容"  style="-webkit-user-select:auto;" contenteditable="true" v-model="newsInserts.summary"></textarea>
            </div>
            <!-- 添加新闻 -->
            <div class="insert_pic">
                <label for="">添加图片：</label>
                <div class="main-product_manage">
                    <ul>
                        <li>
                            <camera v-on:spot="spot" :type="type"></camera>
                        </li>

                    </ul>
                </div>   
            </div>
        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import soFooter from '../components/footer-bar';
import camera from '../public/news_bar';
import { MessageBox } from 'mint-ui';
    export default {
        data() {
            return {
                type:'add',
                command_intop: '',
                proData:'',
                newsInserts: {
                    Title: '',
                    access_token: '',
                    c_id: '',
                    summary:''
                },
                companyName: '所有企业',
                CompanyList:'',
                userInfo:'',
                hostlist: [],
                cpId:'',
                select_show:false,
            }
        },
        mounted() {
            let that = this;
            that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            that.cpId = that.$route.query.cpId;
            if(that.cpId == 0){
                that.select_show = true;
            }
            //获取当前用户的企业列表
            that.getUserCompany();
        },
        methods: {
            spot:function(data){
                this.proData = data;
                console.log(data)
            },
            gotobtn() {
                if(this.cpId == ''){
                    MessageBox.alert('请您选择企业');return false;
                }
                if(!this.newsInserts.Title) {
                    this.$openTips({
                        text: "新闻标题不能为空",
                        time:1000
                    });
                    return;
                }
                if(!this.newsInserts.summary) {
                    this.$openTips({
                        text: "新闻内容不能为空",
                        time:1000
                    });
                    return;
                }
                if(this.proData.length < 1) {
                    this.$openTips({
                        text: "新闻图片不能为空",
                        time:1000
                    });
                    return;
                }
                
                this.newsInserts.access_token = window.localStorage.getItem('access_token');
                this.newsInserts.c_id = this.cpId;
                this.newsInserts.pro = this.proData;

                console.log('cp_id', this.newsInserts + ',');

                this.$post(this.$path + '/index.php/api/Newadd', this.newsInserts).then((response) => {
                    console.log('添加新闻', response); 
                    if(response.code == 200) {
                        this.$router.replace({
                            path: '/userCenter/newsManage',
                            query: {cp_id: this.newsInserts.c_id,u_type:1}
                        })
                    }
                    // newsManage?cp_id=42
                })
            },
            //获取当前用户的企业
            getUserCompany:function(){
                let that = this;
                let userId = that.userInfo.uid;

                this.$fetch(that.$path+'/api.php/Company/getUserCompanyList',{userId})
                .then((res) => {
                console.log('圈子企业',res);
                that.CompanyList = res.data;
                })
            },   
            handleCommand(command) {
                this.companyName = command.name;
                this.cpId = command.id;
                this.command_intop = 'left: 0 !important;'
            },
        },
        components: {
            setHeader,
             camera,
             soFooter
        }
    }
</script>

<style>
/* 全部同事 */
.el-col-24 {
    height: 1rem;
    line-height: 1rem;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #d8d8d8;
}
/* 全部同事第一层级 */
.el-col-24 .el-dropdown {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    display: block;
}
/* 文字 */
 .el-dropdown-link {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    cursor: pointer;
    display: block;
}
  /* 下拉icon */
.el-icon--right {
    float: right;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
}
/* 下拉层级 */
/* .el-dropdown-menu { */
    /* width: 100%;
    height: 6rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 0 !important;
    left: 0 !important;
    margin: 0;
    padding: 0;
    margin-top: 1.88rem !important;
    overflow-y: auto; */
/* } */
/* 三角符号 */
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
    display: none;
}
/* 下拉item */
.el-dropdown-menu__item {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0 0.2rem;
    box-sizing: border-box;
}




/* 标题 */
.main-news_title {
    display: flex;
    justify-content: flex-start;
    padding: 0.2rem 0 0 0.2rem;
    box-sizing: border-box;
}
.main-news_title label {
    width: 1.4rem;
    font-size: 0.28rem;
    color: #333;
    text-align: left;
}
.main-news_title textarea {
    width: 5.8rem;
    height: 1.4rem;
    outline: none;
    font-size: 0.28rem;
    color: #333;
    margin-top: -0.06rem;
    border: 0;
}

/* 内容 */
.main_news_content {
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    padding: 0.2rem 0 0 0.2rem;
}
.main_news_content label {
    width: 1.4rem;
    font-size: 0.28rem;
    color: #333;
    text-align: left;
}
.main_news_content textarea {
    width: 5.8rem;
    height: 3.04rem;
    outline: none;
    font-size: 0.28rem;
    color: #333;
}


.insert_pic label {
    font-size: 0.28rem;
    color: #333;
    text-align: left;
    display: block;
    padding-left: 0.23rem;
}
/* 添加图片
.insert_pic {
    padding: 0.3rem 0;
    box-sizing: border-box;
}
.insert_pic label {
    font-size: 0.28rem;
    color: #333;
    text-align: left;
    display: block;
    padding-left: 0.23rem;
}
.main-product_manage .add_active {
    width: 2.2rem !important;
    height: 2.2rem !important;
    background-color: #F2F2F2 !important;
    border-radius: 4px !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
     padding-top: 0.01rem;
}
.main-product_manage .add_active span {
    width: 1rem;
    height: 1rem;
    background-color: #e50838;
    border-radius: 50%;
    display: block;
    margin: 0.6rem;
}
.main-product_manage .add_active .icon-jia {
    font-size: 0.48rem;
    line-height: 1rem;
    vertical-align: text-top;
    text-align: center;
    color: #fff;
} */

/* 图片排列 */
.main-product_manage {
    padding-top: 0.2rem;
}
.main-product_manage ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.main-product_manage ul>li {
    text-align: center;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 0.3rem;
    /* margin-left: 0.23rem; */
}
.main-product_manage img {
    width: 2rem;
}


</style>